<template>
    <div class="user">
        <div class="search">
            <el-button type="primary" size="small" @click="editRef.drawer=true" >添加</el-button>
        </div>
        <el-table size="small" :data="employees" style="width: 98%">
            <!-- <el-table-column prop="id"  label="编号" width="180" type="index"/>                -->
            <el-table-column prop="id"  label="编号" width="100" />               
            <el-table-column  prop="username" label="用户名" width="100"  />
            <el-table-column prop="name" label="姓名" width="100" />
            <el-table-column prop="phone" label="手机号" width="150" />
            <el-table-column prop="userAddress" label="住址" width="180" />
            <el-table-column prop="roleName" label="角色" width="180" />
            <el-table-column prop="sex" label="性别" width="100" >
                <template  #default="scope">
                <!-- 判断 sex 的值，1 显示 男，0 显示 女 -->
                <span>{{ scope.row.sex === 1 ? '男' : '女' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="entryTime" label="入职时间" width="180" />
                
             <el-table-column label="操作">
                <el-button size="small" @click="handleEdit()">
                        编辑
                </el-button>
                <el-button size="small" type="danger" @click="handleDelete()">
                        删除
                </el-button>
                <el-button size="small" @click="handleDetail()">
                        详情
                </el-button>
            </el-table-column>
            <EditUser ref="editRef"></EditUser>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import EditUser from "../../../components/user/EditRole.vue";
import {$employList} from '../../../api/admin.ts'
import {ElNotification, ElMessageBox} from 'element-plus'
//员工列表
let employees = ref([])
//总数量
let count = ref(0)

//加载角色列表
const loadEmployees = async()=>{
    let ret = await $employList()
    employees.value = ret.t
    count.value = ret.t.length
    console.log(ret.t);
    
    // roles.value = data.t
}

//详情
const handleDetail = async() =>{

}
// 编辑方法
const handleEdit = async () =>{
   
}
//删除方法
const handleDelete = ()=>{
     ElMessageBox.confirm(
        '确定删除么？',
        '提示',
        {
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }
    )
}

//定义编辑组件ref对象
let editRef = ref(null)

onMounted(()=>{
    loadEmployees()
})
</script>

<style lang="scss" scoped>
.search{
    margin-bottom: 5px;
}
</style>